<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-adx__report">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item label="账户ID">
          <el-input v-model="dataForm.dspId" placeholder="dspId" clearable></el-input>
        </el-form-item>
        <el-form-item label="转化类型">
          <el-input v-model="dataForm.resultType" placeholder="转化类型" clearable></el-input>
        </el-form-item>
        <el-form-item label="计划ID">
          <el-input v-model="dataForm.campaignId" placeholder="计划ID" clearable></el-input>
        </el-form-item>
        <el-form-item label="广告组ID">
          <el-input v-model="dataForm.adgroupId" placeholder="广告组ID" clearable></el-input>
        </el-form-item>
        <el-form-item label="创意ID">
          <el-input v-model="dataForm.contentId" placeholder="创意ID" clearable></el-input>
        </el-form-item>
        <el-form-item label="OAID">
          <el-input v-model="dataForm.oaid" placeholder="oaid" clearable></el-input>
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker 
            v-model="dateRange" 
            value-format="yyyy-MM-dd" 
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="handleDateRangeChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="流水ID">
          <el-input v-model="dataForm.bizRequestId" placeholder="oaid" clearable></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-tooltip content="查询此页面数据必须要有账户ID才可查询" placement="top" :disabled="!!dataForm.dspId">
            <el-button @click="getDataList()" :disabled="!dataForm.dspId">
              <i class="el-icon-search" v-if="dataForm.dspId"></i>
              <i class="el-icon-warning" v-else></i>
              {{ $t('query') }}
            </el-button>
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('adx:report:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('adx:report:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" v-if="false" label="主键ID" header-align="center" align="center"></el-table-column>
        <el-table-column  prop="bizRequestId" label="流水ID" :show-overflow-tooltip='true' header-align="center" align="center"></el-table-column>
        <el-table-column prop="dspId" label="广告主ID" header-align="center" align="center"></el-table-column>
        
        <el-table-column prop="eventType" label="事件类型" header-align="center" align="center"></el-table-column>
        <el-table-column prop="traceTime" label="请求时间" :show-overflow-tooltip='true' header-align="center" align="center"></el-table-column>
        <el-table-column prop="ip" label="上报的IP" :show-overflow-tooltip='true' header-align="center" align="center"></el-table-column>
        <el-table-column prop="oaid" :show-overflow-tooltip='true' label="oaid" header-align="center" align="center"></el-table-column>
        <el-table-column prop="campaignId" label="计划ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="adgroupId" label="广告组ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="contentId" label="素材ID" header-align="center" align="center"></el-table-column>
        
        <el-table-column prop="channel" label="渠道" header-align="center" align="center"></el-table-column>
        <el-table-column prop="resultType" label="转换类型" header-align="center" align="center"></el-table-column>
        <el-table-column prop="resultTime"   label="转化时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="createTime" :show-overflow-tooltip='true' label="创建时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="updateTime" :show-overflow-tooltip='true' label="更新时间" header-align="center" align="center"></el-table-column>
        
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="callback(scope.row,1)">激活回传</el-button>
            <el-button  type="text" size="small" @click="callback(scope.row,2)">注册回传</el-button>
            <el-button  type="text" size="small" @click="callback(scope.row,4)">次留回传</el-button>
            <el-button  type="text" size="small" @click="callback(scope.row,3)">付费回传</el-button>
            <el-button  type="text" size="small" @click="callback(scope.row,5)">唤醒回传</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './report-add-or-update'
import moment from 'moment';
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/adx/report/page',
        getDataListIsPage: true,
        exportURL: '/adx/report/export',
        deleteURL: '/adx/report',
        deleteIsBatch: true
      },
      dataForm: {
        id: '',
        day__start: '',
        day__end: ''
      },
      callbackForm: {},
      dateRange: [], // 日期范围选择器的值
      pickerOptions: {
        disabledDate: (time) => {
          // 只禁用未来日期
          return time.getTime() > Date.now()
        }
      }
    }
  },
  components: {
    AddOrUpdate
  },
  methods: {
    // 重写查询方法，添加账户ID验证
    getDataList() {
      if (!this.dataForm.dspId) {
        this.$message.warning('请先输入账户ID才能查询数据')
        return
      }
      // 调用 mixin 的原始查询方法
      this.dataListLoading = true
      this.$http.get(
        this.mixinViewModuleOptions.getDataListURL,
        {
          params: {
            order: this.order,
            orderField: this.orderField,
            page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
            limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
            ...this.dataForm
          }
        }
      ).then(({ data: res }) => {
        this.dataListLoading = false
        if (res.code !== 0) {
          this.dataList = []
          this.total = 0
          return this.$message.error(res.msg)
        }
        this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
        this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    formatTimestamp(row, column, cellValue) {
      if (!cellValue) return '';
      return moment(timestamp).format('YYYY-MM-DD');
    },
    // 处理日期范围变化
    handleDateRangeChange(value) {
      if (value && value.length === 2) {
        this.dataForm.day__start = value[0]
        this.dataForm.day__end = value[1]
        
        // 检查日期范围是否超过7天
        const startDate = new Date(value[0])
        const endDate = new Date(value[1])
        const diffTime = Math.abs(endDate - startDate)
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
        
        if (diffDays > 7) {
          this.$message.warning('日期范围不能超过7天，请重新选择')
          this.dateRange = []
          this.dataForm.day__start = ''
          this.dataForm.day__end = ''
          return
        }
      } else {
        this.dataForm.day__start = ''
        this.dataForm.day__end = ''
      }
    },
    callback(row,type){
      this.callbackForm.dspId=row.dspId;
      this.callbackForm.bizRequestId=row.bizRequestId;
      this.callbackForm.type=type;
      

      return this.$http.get('/adx/report/callback',{params:this.callbackForm}).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message('回传上报成功');
      }).catch(() => { })
    }
  }
}
</script>
